﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>HOME</title>
		<%@ include file="/share/include.jsp" %>
		<!-- <script src="js/jquery.min.js"></script> -->
   		 <meta name="viewport" content="width=device-width, initial-scale=1">
		 <script type="application/x-javascript"> 
			addEventListener("load", function() { 
				setTimeout(hideURLbar, 0); 
			}, false); 
			function hideURLbar(){ 
				window.scrollTo(0,1); 
			} 
		</script>
	</head>
	<body>
		<!-- container -->
		<!-- header -->
		<div class="header">
			<%@ include file="/control/jsp/layout/header.jsp" %>
			<!-- /bottom-header -->
		</div>
		<!-- header -->
		<!--- top-nav -->
			<%@ include file="/control/jsp/layout/indexMenu.jsp" %>
		<!--- top-nav -->
		<!-- banner -->
		<div class="banner">
			<div class="container">
				<!--- img-slider --->
				<div class="img-slider">
					 <script>
					    // You can also use "$(window).load(function() {"
					    $(function () {
					      // Slideshow 4
					      $("#slider4").responsiveSlides({
					        auto: true,
					        pager: true,
					        nav: true,
					        speed: 500,
					        namespace: "callbacks",
					        before: function () {
					          $('.events').append("<li>before event fired.</li>");
					        },
					        after: function () {
					          $('.events').append("<li>after event fired.</li>");
					        }
					      });
					
					    });
					  </script>
					<!----//End-slider-script---->
					<!-- Slideshow 4 -->
					    <div  id="top" class="callbacks_container">
					      <ul class="rslides" id="slider4">
					      	<c:if test="${not empty scrollPageView.records }">
					      		<c:forEach items="${scrollPageView.records }" var="scroll">
				      				<li onclick="window.location.href='${root}/${scroll.scrollObjPath }&${cityValue }'">
							          <img class="img-responsive" style="height: 550px;width: 100%;" src="${imageService }${scroll.scrollPath}" title="${scroll.scrollName}" alt="${scroll.scrollName}">
							          <div class="slider-caption">
							          	<h1></h1>
							          	<p></p>
							          </div>
							        </li>
					      		</c:forEach>
					      	</c:if>
					      </ul>
					    </div>
					    <div class="clearfix"> </div>
					</div>
						<!-- slider -->
			</div>
		</div>
		<!-- banner -->
		<!-- top-grids -->
		<div class="top-grids">
			<div class="container">
				<c:if test="${not empty shopPageView.records }">
		      		<c:forEach items="${shopPageView.records }" var="shop" begin="0" end="5">
		      			<div class="col-md-4 top-grid text-center">
							<div class="top-grid-pic">
								<img style="width:200px; height:200px;" src="${imageService }${shop.shopLogo}" title="${shop.shopName }" />
								<br>
								<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 360px;height: 38px;display: block;">${shop.shopName }</span>
							</div>
							<div class="top-grid-pic-info">
								<a href="${root }/control/layoutController/displayShopDetail.do?shopId=${shop.shopId}&${cityValue }">GO SHOP</a>
							</div>
						</div>
					</c:forEach>
				</c:if>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- top-grids -->
		<!-- bottom-grids -->
		<div class="bottom-grids">
			<div class="container">
				<div class="col-md-9 bottom-grids-left">
					<div class="f-products">
						<h2>NEW CASE</h2>
						<div class="sreen-gallery-cursual">
							        <script>
									    $(document).ready(function() {
									      $("#owl-demo").owlCarousel({
									        items : 3,
									        lazyLoad : true,
									        autoPlay : true,
									        navigation : true,
									        navigationText :  false,
									        pagination : false,
									      });
									    });
									   </script>
							 <!-- start content_slider -->
						       <div id="owl-demo" class="owl-carousel text-center">
						       		<c:if test="${not empty casesPageView.records }">
						       			<c:forEach items="${casesPageView.records }" begin="0" end="4" var="cases">
						       				<div class="item">
							                	<div onClick="location.href='${root }/control/layoutController/displayCaseDetail.do?caseId=${cases.caseId }&${cityValue }';" class="product-grid">
													<div class="product-pic">
														<c:if test="${not empty cases and not empty cases.picList }">
									  						<c:forEach items="${cases.picList }" var="pic" begin="0" end="0">
									  							<img src="${imageService }${pic.picPath}" title="${cases.caseTitle }" alt="${cases.caseTitle }" style="height: 200px;width: 200px;"  />
									  						</c:forEach>
									  					</c:if>
									  					<c:if test="${empty cases or empty cases.picList }">
									  						<img src="${imageService }${cases.caseTitle}" title="${cases.caseTitle }" alt="${cases.caseTitle }" style="height: 200px;width: 200px;"  />
									  					</c:if>
													</div>
													<div class="product-pic-info">
														<h3><a href="#" style="font-weight:700;">${cases.caseTitle}</a></h3>
														<h4><a href="#">${cases.caseArea}㎡</a></h4>
														<h4><a href="#">${cases.caseHouseType}</a></h4>
														<div class="product-pic-info-price-cart">
															<div class="product-pic-info-price">
																<span>$ ${cases.casePrice}</span>
															</div>
															<div class="product-pic-info-cart">
															</div>
															<div class="clearfix"> </div>
														</div>
													</div>
												</div>
							                </div>
						       			</c:forEach>
						       		</c:if>
				              </div>
						<!--//sreen-gallery-cursual---->
							
					</div>
				</div>
				<div class="d-products f-products">
						<h2><!-- 最新CASE --></h2>
							<!----sreen-gallery-cursual---->
						<div class="sreen-gallery-cursual">
							        <script>
									    $(document).ready(function() {
									      $("#owl-demo1").owlCarousel({
									        items : 3,
									        lazyLoad : true,
									        autoPlay : true,
									        navigation : true,
									        navigationText :  false,
									        pagination : false,
									      });
									    });
									   </script>
						       <div id="owl-demo1" class="owl-carousel text-center">
						       		<c:if test="${not empty casesPageView.records }">
						       			<c:forEach items="${casesPageView.records }" begin="5" end="9" var="cases">
						       				<div class="item">
							                	<div onClick="location.href='${root }/control/layoutController/displayCaseDetail.do?caseId=${cases.caseId }&${cityValue }';" class="product-grid">
													<div class="product-pic">
														<c:if test="${not empty cases and not empty cases.picList }">
									  						<c:forEach items="${cases.picList }" var="pic" begin="0" end="0">
									  							<img src="${imageService }${pic.picPath}" title="${cases.caseTitle }" alt="${cases.caseTitle }" style="height: 200px;width: 200px;"   />
									  						</c:forEach>
									  					</c:if>
									  					<c:if test="${empty cases or empty cases.picList }">
									  						<img src="${imageService }${cases.caseTitle}" title="${cases.caseTitle }" alt="${cases.caseTitle }" style="height: 200px;width: 200px;"  />
									  					</c:if>
													</div>
													<div class="product-pic-info">
														<h3><a href="#" style="font-weight:700;">${cases.caseTitle}</a></h3>
														<h4><a href="#">${cases.caseArea}㎡</a></h4>
														<h4><a href="#">${cases.caseHouseType}</a></h4>
														<div class="product-pic-info-price-cart">
															<div class="product-pic-info-price">
																<span>$ ${cases.casePrice}</span>
															</div>
															<div class="product-pic-info-cart">
															</div>
															<div class="clearfix"> </div>
														</div>
													</div>
												</div>
							                </div>
						       			</c:forEach>
						       		</c:if>
				              </div>
						<!--//sreen-gallery-cursual---->
							
					</div>
				</div>
				</div>
				<div class="col-md-3 bottom-grids-right">
					<h2>Notice</h2>
					<div class="shhiping text-center" style="border-bottom:1px solid #999;height: 215px;">
						<c:if test="${not empty noticePageView.records }">
		      				<c:forEach items="${noticePageView.records }" var="notice" begin="0" end="4">
		      					<p><a style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 250px;height: 28px;display: block;" href="${root }/control/layoutController/displayNoticeDetail.do?noticeId=${notice.noticeId}&${cityValue}"><fmt:formatDate value="${notice.noticeCreateTime}" pattern="yyyy-MM-dd"/> ${notice.noticeTitle }</a></p>
		      				</c:forEach>
		      			</c:if>
						<p style=" text-align:right;">&nbsp;
							<c:if test="${noticeCount > 5 }">
								<a href="${root }/control/layoutController/displayNoticeList.do?${cityValue}">more>> </a>
							</c:if>
						</p>
                    </div>
					<c:if test="${not empty shopPageView.records }">
		      			<c:forEach items="${shopPageView.records }" var="shop" begin="6" end="7">
		      				<div class="shhiping text-center">
								<a href="${root }/control/layoutController/displayShopDetail.do?shopId=${shop.shopId}&${cityValue }"><img src="${imageService }${shop.shopLogo}" width="200" height="200" title="${shop.shopName }" /></a>
							</div>
		      			</c:forEach>
		      		</c:if>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<!-- bottom-grids -->
		<!-- footer -->
		<%@ include file="/control/jsp/layout/footer.jsp" %>
</body>
</html>

